<template>
  <div class="typeBox">
    <div class="payType">
      <backLast />
      <div class="orderStatus">
        <div class="leftBox">
          <div class="status">
            <img
              src="../../assets/img/success.png"
              alt=""
            >
            <div>
              <div class="title">
                下单成功 感谢您的支持
              </div>
              <!-- <div class="tip">
                预计11月3日送达
              </div> -->
            </div>
          </div>
          <div class="info">
            <div class="infos">
              实付：<span>¥ {{ orderInfo.fPayMoney }}</span> 收件信息：{{ orderInfo.cReceiveAddress }}  {{ orderInfo.cReceiveMobile }}   {{ orderInfo.cReceiver }}
            </div>
            <div class="btns">
              <div
                class="order"
                @click="goOrderDetail"
              >
                查看订单
              </div>
              <router-link
                class="other"
                tag="div"
                to="/"
              >
                随便逛逛
              </router-link>
            </div>
          </div>
        </div>
        <div class="img">
          <img
            src="../../assets/img/order1.png"
            alt=""
          >
        </div>
      </div>
    </div>
    <Like />
  </div>
</template>

<script>
	import Like from '../../components/common/like.vue'
	import backLast from '../../components/common/backLast.vue'
	export default{
		components:{
			backLast,
			Like
		},
		data(){
			return{
				orderNo:"",
				orderInfo:{}
			}
		},
		mounted() {
			this.orderNo = this.$route.query.cOrderNo
			if(this.orderNo !=''){
				this.getOrderDetail()
			}
		},
		methods:{
			getOrderDetail(){
				let params ={
					token:localStorage.getItem('token'),
				
					data:{
						cOrderNo:this.orderNo
					}
				}
				this.$api.person.getDetail(params).then(res=>{
					if(res.code==200){
						console.log(res.data)
						this.orderInfo = res.data;
					}
				})
			},
			//查看订单
			goOrderDetail(){
				this.$router.push({
					path:`/person/orderDetail?cOrderNo=${this.orderInfo.cOrderNo}`
				})
			},
			//随便看看
			goHome(){
				this.$router.push({
					path:`/`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.payType{
		margin-top: 3.75rem;
		padding: 2.38rem 16.44rem;
		display: flex;
		align-items: center;
		flex-direction: column;
		.orderStatus{
			width: 87.63rem;
			height: 38rem;
			background-color: #Fff;
			margin-top: 2.38rem;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.leftBox{
				padding: 3.81rem 3.19rem;
				width: 55.62rem;
				.info{
					color: #666666;
					font-size: 1rem;
					.infos{
						padding: 1.94rem 0 2.63rem;
					}
					.btns{
						display: flex;
						flex-direction: row;
						>div{
							font-size: 0.88rem;
							width: 10.13rem;
							height: 2.81rem;
							margin-right: 2.51rem;
							text-align: center;
							line-height: 2.81rem;
							// border:0.06rem solid #7E8C8D;
							cursor: pointer;
							color: #fff;
							&:hover{
								opacity: 0.8;
							}
							&.order{
								background:rgba(0,0,0,1);
							}
							&.other{
								background:rgba(240,64,111,1);
							}
						}
					}
				}
				.status{
					display: flex;
					flex-direction: row;
					align-items: center;
					padding-bottom: 4.06rem;
					border-bottom: 0.06rem solid rgba(226,226,226,1);
					img{
						width: 4.25rem;
						height: 4.25rem;
						margin-right: 0.81rem;
					}
					.title{
						font-size: 1.38rem;
						color: #333333;
						padding-bottom: 0.56rem;
					}
					.tip{
						color: #999999;
						font-size: 0.88rem;
					}
				}
			}
			.img{
				width: 25.63rem;
				height: 38rem;
				
				>img{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
